<template>
  <view class="page">
    <view class="switch">
      <view class="switch-item" :class="{'active':activeIndex===index}" v-for="(item,index) in labelsList"
        :key="item.id" @click="selectWorksByLabel(index)">
        {{item.tagName}}
      </view>
    </view>
    <z-paging ref="paging" :default-page-no="1" :default-page-size="5" v-model="list" @query="queryList" :fixed="false"
      loading-more-no-more-text="已全部加载" height="calc(100vh - 180rpx)" :style="{marginTop:'10px'}">
      <works-list :works-list="list" :works-style="{padding: '10rpx 20rpx'}" />
    </z-paging>
    <fixed-info share-url="/pages/works/index" />
  </view>
</template>

<script>
  import host from '@/utils/ipConfig.js'
  import WorksList from '@/components/WorksList.vue'
  import {
    getWorksListByLabelIdApi
  } from '@/api/works.js'
  import {
    getLabelListApi
  } from '@/api/label.js'
  export default {
    data() {
      return {
        activeIndex: 0,
        list: [],
        labelsList: [],
        searchForm: {
          page: 1,
          limit: 15,
          businessId: '',
          labelId: ''
        }
      }
    },
    components: {
      WorksList
    },
    onLoad() {
      this.getLabelsList(host.appId)
    },
    methods: {
      async getLabelsList(businessId) {
        try {
          const {
            code,
            data
          } = await getLabelListApi(businessId)
          if (code === '000000') {
            this.labelsList = [{
              id: '',
              businessId,
              tagName: '全部标签'
            }].concat(data ?? [])
          }
        } catch (e) {
          console.log(e)
        }
      },
      handleLinkToDetail(item) {
        uni.navigateTo({
          url: `/pages/works/detail?id=${item.id}`
        })
      },
      selectWorksByLabel(index) {
        this.activeIndex = index
        this.$refs.paging.reload()
      },
      async queryList(pageNo, pageSize) {
        const selectItem = this.labelsList[this.activeIndex]
        this.searchForm = {
          page: pageNo,
          limit: pageSize,
          businessId: selectItem.businessId,
          labelId: selectItem.id
        }
        const {
          code,
          data
        } = await getWorksListByLabelIdApi(this.searchForm)
        this.$refs.paging.complete(code === '000000' ? data?.records ?? [] : false)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    height: 100vh;
    color: #fff;
  }

  .switch {
    width: 100%;
    overflow: auto;
    display: flex;
    flex-wrap: nowrap;
    padding: 20rpx 0;

    .switch-item {
      color: #969696;
      font-size: 28rpx;
      text-align: center;
      min-width: 140rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-bottom: 15rpx;
    }

    .active {
      color: #fff;
      font-weight: 700;
    }
  }
</style>
